<template>
	<view class="bodi">


		<view class="formGroup">
			<view class="header">基础信息</view>
			<view class="formItem">
				<view class="formLabel">客户公司名称<text class="red">*</text></view>
				<niceui-data-select-input v-model="customId" :localdata="customArr">
				
				</niceui-data-select-input>
				<!-- <input type="text" placeholder="请选择客户公司" v-model="info.customName" @click="showCustoms=true"></input> -->
			</view>
			<u-popup :show="showCustoms" @close="showCustoms=false">
				<view class="selectTitle">选择客户公司</view>
				<view class="customList selectList">

					<view class="item" v-for="(item,index) in customArr" :key="index"
						@tap="changeCustom(item)">
						<image src="/static/icon/xn.png" v-show="info.customId!=item.id"></image>
						<image src="/static/icon/xz.png" v-show="info.customId==item.id"></image>
						{{item.name}}
					</view>
				</view>
			</u-popup>
			<!-- <view class="formItem">
				<view class="formLabel">车间名称<text class="red">*</text></view>
				<niceui-data-select-input v-model="info.chejian" :localdata="chejianArr">
			
				</niceui-data-select-input>
			
			</view>
			<view class="formItem">
				<view class="formLabel" >送修人姓名<text class="red">*</text></view>

				<niceui-data-select-input v-model="info.person_name" :localdata="personNameArr">

				</niceui-data-select-input>
			</view> -->
			<view class="formItem">
				<view class="formLabel">联系方式<text class="red">*</text></view>
				<niceui-data-select-input v-model="info.phone" :localdata="phoneArr">

				</niceui-data-select-input>

			</view>
			<view class="formItem">
				<view class="formLabel">维修公司<text class="red">*</text></view>
				<niceui-data-select-input v-model="info.htA" :localdata="wxgsArr">
				
				</niceui-data-select-input>
			</view>	
		</view>

		<view class="formGroup" style="padding-bottom:100px;">
			<view class="header">送修产品信息</view>
			<view class="formItem">
				<view class="formLabel">KKS码</view>
				<input class="wq-ipt" type="text" v-model="info.kksno" placeholder="请输入kks码"></input>
				
			</view>
			<view class="formItem">
				<view class="formLabel">产品名称<text class="red">*</text></view>
				<niceui-data-select-input v-model="info.name" :localdata="nameArr">

				</niceui-data-select-input>

			</view>
			
			<view class="formItem">
				<view class="formLabel">产品数量<text class="red">*</text></view>
				<input class="wq-ipt" type="number" v-model="info.num" placeholder="请输入产品数量"></input>
			
			</view>
			<view class="formItem">
				<view class="formLabel">产品型号<text class="red">*</text></view>
				<niceui-data-select-input v-model="info.cpxh" :localdata="cpxhArr">

				</niceui-data-select-input>

			</view>
			
			<view class="formItem">
				<view class="formLabel">产品口径<text class="red">*</text></view>
				<niceui-data-select-input v-model="info.cpkj" :localdata="cpkjArr">

				</niceui-data-select-input>
			</view>
			<view class="formItem">
				<view class="formLabel">生产厂家<text class="red">*</text></view>
				<niceui-data-select-input v-model="info.sccj" :localdata="sccjArr">

				</niceui-data-select-input>
			</view>
			<view class="formItem">
				<view class="formLabel">维修次数</view>
				<input class="wq-ipt" type="number" v-model="info.wxcs" placeholder="请输入维修次数"></input>
				
			</view>
			<view class="formItem">
				<view class="formLabel">阀体材质</view>
				<niceui-data-select-input v-model="info.ftcz" :localdata="ftczArr">

				</niceui-data-select-input>
			</view>
			<view class="formItem">
				<view class="formLabel">阀芯材质</view>
				<niceui-data-select-input v-model="info.fxcz" :localdata="fxczArr">

				</niceui-data-select-input>
			</view>
			<view class="formItem">
				<view class="formLabel">阀杆材质</view>
				<niceui-data-select-input v-model="info.fgcz" :localdata="fgczArr">

				</niceui-data-select-input>
			</view>
			
			<view class="formItem">
				<view class="formLabel">描述</view>
				<textarea placeholder="请输入具体故障描述" v-model="info.describ"></textarea>

			</view>
			<view class="formItem">
				<view class="formLabel">描述图片</view>
				<view class="picBar">
					<view class="picList">
						<view class="picItem" v-for="(it,idx) in imgUrlList" :key="idx">
							<view class="close" @tap="delImg(idx)">x</view>
							<image :src="cdnUrl+it" class="pjImg" mode="aspectFill"></image>
						</view>
					</view>
					<view class="picBtn" @tap="selectImg(index)">
						<image src="/static/icon/xiangji.png" class="xjImg"></image>
						<text>上传图片({{imgUrlLength}}/6)</text>
					</view>
				</view>
			</view>
			<view class="formItem">
				<view class="formLabel">描述视频</view>
				<view class="picBar">
					
					<view class="picList">
						<view class="picItem" v-for="(it,idx) in videoUrlList" :key="idx">
							<view class="close" @tap="delVideo(idx)">x</view>
							<video :src="cdnUrl+it" class="pjImg"></video>
						</view>
					</view>
					<view class="picBtn" @tap="selectVideo(index)">
						<image src="/static/icon/xiangji.png" class="xjImg"></image>
						<text>上传视频({{videoUrlLength}}/3)</text>
					</view>
				</view>
			</view>
			<view class="xidi">
				<view class="wq-btn" @tap="save">进厂</view>

			</view>
		</view>

	</view>
</template>

<script>
	import { number } from '../uni_modules/uview-plus/libs/function/test'
import api from '@/api.js'
	import helper from '@/common/helper.js'
	export default {
		mixins:[helper],
		data() {
			return {
				customId:'',
				wxgsArr:[
					{
						value:'YD',
						text:"远大"
					},{
						value:"WG",
						text:"威固"
					}
				],
				info: {
					kksno:'',
					htA:'',
					customId:'',
					customName: '',
					person_name: '',
					phone: '',
					pics: '',
					name: '',
					cpxh: '',
					num:1,
					cpgg: '',
					cpkj: '',
					sccj: '',
					fxcz: '',
					ftcz: '',
					fgcz: '',
					wxcs:'',
					describ: '',
					chejian: '',
					pic_json:'',

				},
				showCustoms: false,
				imgUrlList:[],
				videoUrlList:[],
				videoUrlLength:0,
				imgUrlLength:0,
				customArr: [],
				personNameArr: [],
				chejianArr: [],
				phoneArr: [],
				nameArr: [],
				cpggArr: [],
				cpxhArr: [],
				cpkjArr: [],
				sccjArr: [],
				ftczArr: [],
				fxczArr: [],
				fgczArr: []
			}
		},
		watch: {
			customId(newVal, oldVal) {
				console.log(234555555555555555);
				if(typeof(this.customId)=="number"){
					this.info.customId=this.customId;
					api.doRequest('get','custom/getPersonList',{id:this.customId}).then(res=>{
						let phoneArr=[];
						let personNameArr=[];
						res.data.data.forEach((item,index)=>{
							phoneArr.push({value:item.phone,text:item.phone});
							personNameArr.push({value:item.name,text:item.name});
						})
						this.phoneArr=phoneArr;
						this.personNameArr=personNameArr;
						// this.info.person_name=res.data.data.personName;
						// this.info.phone=res.data.data.personPhone;
					})
					
				}else{
					this.customId=='';
					uni.showToast({
						title:"该用户未注册，请重新选择",
						icon:"none"
					})
				}
			}
		},
		onLoad(e) {
			if(!uni.getStorageSync('token')){
				uni.navigateTo({
					url:'/pages/login/login'
				})
			}
			api.doRequest('get', 'valve/getAllChejian').then(res => {
				console.log(res);
				this.chejianArr = res.data.data;
			})
			api.doRequest('get', 'custom/getAll').then(res => {
				console.log(res);
				this.customArr = res.data.data;
			})
			api.doRequest("get", 'valve/getAllPersonName', '', '', '').then(res => {
				this.personNameArr = res.data.data;
			})
			api.doRequest("get", 'valve/getAllPhone', '', '', '').then(res => {
				this.phoneArr = res.data.data;
			})
			api.doRequest("get", 'valve/getAllName', '', '', '').then(res => {
				this.nameArr = res.data.data;
			})
			api.doRequest("get", 'valve/getAllCpgg', '', '', '').then(res => {
				this.cpggArr = res.data.data;
			})
			api.doRequest("get", 'valve/getAllCpxh', '', '', '').then(res => {
				this.cpxhArr = res.data.data;
			})
			api.doRequest("get", 'valve/getAllCpkj', '', '', '').then(res => {
				this.cpkjArr = res.data.data;
			})
			api.doRequest("get", 'valve/getAllsccj', '', '', '').then(res => {
				this.sccjArr = res.data.data;
			})
			api.doRequest("get", 'valve/getAllftcz', '', '', '').then(res => {
				this.ftczArr = res.data.data;
			})
			api.doRequest("get", 'valve/getAllfgcz', '', '', '').then(res => {
				this.fgczArr = res.data.data;
			})
			api.doRequest("get", 'valve/getAllfxcz', '', '', '').then(res => {
				this.fxczArr = res.data.data;
			})
			var that=this;
			
				api.doRequest('get','valve/getOne?id='+e.id,'','','').then(res=>{
					console.log(res);
					that.info=res.data.data;
					that.customId=parseInt(that.info.customId);
					let picArr=JSON.parse(that.info.picJson);
					let videoArr=JSON.parse(that.info.videoJson);
					that.imgUrlList=picArr;
					that.videoUrlList=videoArr;
					that.imgUrlLength=picArr.length;
					that.videoUrlLength=videoArr.length;
					
				});
			
			
		},
		methods: {
			changeCustom(item){
				this.info.customName=item.name;
				this.info.custom_id=item.id;
				this.showCustoms=false;
			},
			selectVideo(index){
				var count=3-this.videoUrlList.length;
				if(count==0){
					uni.showToast({
						title:"不能上传更多的视频"
					})
				}
				var that=this;
				uni.chooseVideo({
					count:count,
					success:(res)=>{
						let baseUrl = 'https://up-z2.qiniup.com/';
				
						console.log(res);
						
							var tempFilePath=res.tempFilePath;
							let key = 'sjfkdgfhjkhjksdjkjhkfdsq' + Date.now();
							let param = {
								file_name: key,
								type: 1
							};
							var token = '';
							api.doRequest('post', 'upload/upload_token', param).then(res => {
								if (res.statusCode == 200) {
									console.log(res.data.data.token);
									token = res.data.data.token;
									uni.showLoading();
									uni.uploadFile({
										url: baseUrl, //仅为示例，非真实的接口地址
										filePath: tempFilePath, //请求图片数组
										name: 'file',
										formData: {
											'key': key,
											'token': token,
										}, //请求参数
										success: (uploadFileRes) => {
											var ret=JSON.parse(
												uploadFileRes.data);
											that.videoUrlList.push(ret.key);
											that.videoUrlLength=that.videoUrlList.length;
											setTimeout(function(){
												uni.hideLoading();
											},2000);
										}
									})
								}
							})
						
						
						
						
					}
				})
			},
			selectImg(index){
				var count=6-this.imgUrlList.length;
				if(count==0){
					uni.showToast({
						title:"不能上传更多的图片"
					})
				}
				var that=this;
				uni.chooseImage({
					count:count,
					success:(res)=>{
						//console.log(res);
						
						let baseUrl = 'https://up-z2.qiniup.com/';
						// uni.showLoading({
						// 	title: '上传中'
						// })
						
						res.tempFilePaths.forEach((item, idx) => {
							let key = 'sjfkdgfhjkhjksdjkjhkfdsq' + Date.now();
							let param = {
								file_name: key,
								type: 1
							};
							var token = '';
							api.doRequest('post', 'upload/upload_token', param).then(res => {
								if (res.statusCode == 200) {
									console.log(res.data.data.token);
									token = res.data.data.token;
									uni.uploadFile({
										url: baseUrl, //仅为示例，非真实的接口地址
										filePath: item, //请求图片数组
										name: 'file',
										fileType: "image",
										formData: {
											'key': key,
											'token': token,
										}, //请求参数
										success: (uploadFileRes) => {
											var ret=JSON.parse(
												uploadFileRes.data);
											that.imgUrlList.push(ret.key);
											that.imgUrlLength=that.imgUrlList.length;
										}
									})
								}
							})
						});
						
						
						
					}
				})
			},
			save() {
				var data = this.info;
				if(typeof(data.customId)=='undefined'){
					uni.showToast({
						title:"请选择客户",
						icon:"none"
					})
					return ;
				}
				
				console.log(data.customId);
				if(data.chejian==''){
					uni.showToast({
						title:"请填写车间",
						icon:"none"
					})
					return ;
				}
					
				if(data.personName==''){
					uni.showToast({
						title:"请填写送阀人姓名",
						icon:"none"
					})
					return;
				}
				if(data.phone==''){
					uni.showToast({
						title:"请填写联系方式",
						icon:"none"
					})
					return;
				}
				if(data.name==''){
					uni.showToast({
						title:"请填写产品名称",
						icon:"none"
					})
					return;
				}
				if(data.cpxh==''){
					uni.showToast({
						title:"请填写产品型号",
						icon:"none"
					})
					return;
				}
				if(data.cpkj==''){
					uni.showToast({
						title:"请填写产品口径",
						icon:"none"
					})
					return;
				}
				if(data.sccj==''){
					uni.showToast({
						title:"请填写生产厂家",
						icon:"none"
					})
					return;
				}
				data.pic_json=JSON.stringify(this.imgUrlList);
				data.video_json=JSON.stringify(this.videoUrlList);
				api.doRequest('post', 'valve/save', data).then(res => {
					if (res.statusCode == 200 && res.data.code==200) {
						uni.showToast({
							title: '保存成功',
							icon: "none"
						})
						setTimeout(function(){
							uni.navigateBack();
						},500);
					}else{
						uni.showToast({
							title:res.data.msg,
							icon:"none"
						})
					}
				})
			},
			delImg(idx){
				this.imgUrlList.splice(idx,1);
				this.imgUrlLength=this.imgUrlList.length;
			},
			delVideo(idx){
				this.videoUrlList.splice(idx,1);
				this.videoUrlLength=this.videoUrlList.length;
			}
		}
	}
</script>

<style>
	.bodi {
		background: #eee;
		padding-top: 20upx;
	}
	.red{color:#f00;}
	.formGroup {
		width: 670upx;
		padding: 20upx;
		margin: 0upx auto;
		margin-bottom: 20upx;
		background: #fff;
		border-radius: 20upx;
	}
	.wq-ipt{border:1upx solid #ccc;padding:10upx;border-radius:10upx;font-size:12px;}
.picBar{display: flex;align-items: center;flex-wrap: wrap;}
	.picList{display: flex;align-items: center;flex-wrap: wrap;}
	.picBtn text{color:#999;font-size:0.8em;text-align: center;width:100%;display: block;}
	.picItem{width:200upx; height:200upx; margin-right:20upx;border:1upx dashed #eee; position: relative}
	.picItem .close{width:30upx; height:30upx;position:absolute;z-index:2;right:-10upx;top:-10upx;background:rgba(0,0,0,0.8);color:#fff;text-align: center;line-height: 30upx;font-size:0.7em;border-radius:10upx;}
	.picItem .pjImg{width:200upx; height:200upx;}
	.xjImg{width:150upx; height:150upx;display: block;margin:0 auto;}
	.header {
		line-height: 100upx;
		color: #004ea2
	}

	/* input{border:1upx solid #ccc;height:60upx;border-radius:10upx;text-indent: 1em;margin:10upx auto;font-size:12px;} */
	textarea {
		border: 1upx solid #ccc;
		width: 630upx;
		border-radius: 10upx;
		padding: 20upx;
		font-size: 12px;
		margin: 10upx auto;
	}

	.formLabel {
		font-size: 12px;
		margin: 20upx 0;
	}
</style>